<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="power('WJOB_GATE_CONTAINER_REGISTER')">
            <el-tab-pane label="进场入库登记" name="first">
                <in-register @load="loadData"></in-register>
            </el-tab-pane>
            <el-tab-pane label="提货出库登记" name="second">
                <out-register @load="loadData"></out-register>
            </el-tab-pane>
        </el-tabs>
        <div class="gate-bg">

        </div>
        <div>
            <span class="title-line">
                在港汽车记录
            </span>
            <car-record ref="car"></car-record>
        </div>
        <div class="gate-bg">

        </div>
        <div v-if="power('WJOB_GATE_CONTAINER_COMMAND')">
            <span class="title-line">
                指令查看
            </span>
            <directive ref="directive"></directive>
        </div>
    </div>
</template>

<script>
import inRegister from "./inRegister.vue";
import outRegister from "./outRegister.vue";
import carRecord from "./carRecord.vue";
import directive from "./directive.vue";
import { commandPush } from "@/api/middleControl/middleControl";

// import "@/utils/mqttws31.js";
// import "@/utils/mqttmq.js";

export default {
    components: {
        inRegister,
        outRegister,
        carRecord,
        directive
    },
    data() {
        return {
            activeName: "first"
            // topic: "mqtt" // 订阅的主题
        };
    },
    mounted () {
        commandPush().then(res=>{})
    },
    methods: {
        handleClick(tab, event) {},
        loadData(){
            this.$refs.car.loadData()
        }
    },
};
</script>

<style>
.gate-bg {
    border-bottom: 1px solid #f3f3f3;
    margin: 10px 0;
}
</style>
